<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData">
      <template #leftBar>
        <tiny-date-picker v-model="data.search.searchDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
        <tiny-button type="primary" @click="queryData">查询</tiny-button>
      </template>
      <template v-slot:loginType="{row}">
        <span v-if="row.accountType == 1">{{ '账户登录' }}</span>
        <span v-else-if="row.accountType == 2">{{ '邮箱登录' }}</span>
        <span v-else="row.accountType == 3">{{ '手机号登录' }}</span>
      </template>
    </vo-table>
  </div>
</template>

<script setup>
  import {reactive, ref, toRef, getCurrentInstance, onBeforeMount} from 'vue';
  let {proxy} = getCurrentInstance();
  const data = reactive({
    search: {},
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
  });
  data.tableData.cols = [
    {title: '操作账户', key: 'operateAccount', width: 120, tooltip: true},
    {title: '访问接口', key: 'operateApi', align: 'left', tooltip: true},
    {title: '访问接口类', key: 'className', align: 'left', tooltip: true},
    {title: '访问类型', key: 'operateType', align: 'left', tooltip: true},
    {title: '调用程序', key: 'moduleCode', align: 'left', tooltip: true},
    {title: '访问参数', key: 'operateParam', align: 'left', tooltip: true},
    {title: '操作时间', key: 'operateTime', align: 'left', tooltip: true},
    {title: '访问开始时间', key: 'beginTime', align: 'left', tooltip: true},
    {title: '访问结束时间', key: 'endTime', align: 'left', tooltip: true},
    {title: '登录IP', key: 'operateIp', align: 'left', tooltip: true},
    {title: '登录位置', key: 'ipAddress', align: 'left', tooltip: true},
  ];
  const queryData = async () => {
    debugger;
    let param = {
      beginDate: data.search.searchDate[0],
      endDate: data.search.searchDate[1],
    };
    data.tableData.data = await proxy.$api.system.queryApiLog(param);
  };
</script>

<style lang="scss" scoped></style>
